NativeScript React — WrapLayout, Activity Indicator, and Action Bar

React is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript React.

WrapLayout

The wrapLayout component is a layout container that lets us position items in rows or columns.

For instance, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <wrapLayout backgroundColor="#3c495e">
      <label
        text="first"
        width="30%"
        height="30%"
        backgroundColor="red"
      />
      <label
        text="second"
        width="30%"
        height="30%"
        backgroundColor="green"
      />
      <label
        text="third"
        width="30%"
        height="30%"
        backgroundColor="blue"
      />
      <label
        text="fourth"
        width="30%"
        height="30%"
        backgroundColor="yellow"
      />
    </wrapLayout>
  );
}

We add the label s inside the wrapLayout .

Then the 4th label will be displayed in the 2nd row since it overflows the first row.

We can make items wrap vertically with:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <wrapLayout orientation="vertical" backgroundColor="#3c495e">
      <label
        text="first"
        width="30%"
        height="30%"
        backgroundColor="red"
      />
      <label
        text="second"
        width="30%"
        height="30%"
        backgroundColor="green"
      />
      <label
        text="third"
        width="30%"
        height="30%"
        backgroundColor="blue"
      />
      <label
        text="fourth"
        width="30%"
        height="30%"
        backgroundColor="yellow"
      />
    </wrapLayout>
  );
}

We have the orientation prop set to 'vertical' , so the 4th label will be added to the 2nd row.

ActivityIndicator

The ActivityIndicator component shows a progress indicator to tell the user of something running in the background.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <flexboxLayout justifyContent='center'>
      <activityIndicator busy />
    </flexboxLayout>
  );
}

to add the activityIndicator .

When busy is true , then the loading indicator will display.

ActionBar

The actionBar component lets us show a toolbar at the top of the activity window.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="Default Page Title" />
        <flexboxLayout justifyContent='center'>
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the actionBar inside the frame and page components.

Then the title value will be displayed at the top.

We can add more content to the actionBar .

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar>
          <stackLayout nodeRole={"titleView"} orientation="horizontal">
            <image src="res://icon" width={40} height={40} verticalAlignment="middle" />
            <label text="NativeScript" fontSize={24} verticalAlignment="middle" />
          </stackLayout>
        </actionBar>
        <flexboxLayout justifyContent='center'>
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the stackLayout and add the image and label inside.

And then we display the flexboxLayout below it to display the content.

We can remove the app border with the flat prop:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App" flat />
        <flexboxLayout justifyContent='center'>
        </flexboxLayout>
      </page>
    </frame>
  );
}

And we can add buttons into the actionBar by writing:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar>
          <label nodeRole={"titleView"}>Hello World</label>
          <actionItem nodeRole={"actionItems"}>
            <button nodeRole={"actionView"}>One</button>
          </actionItem>
          <actionItem nodeRole={"actionItems"}>
            <button nodeRole={"actionView"}>Two</button>
          </actionItem>
          <actionItem nodeRole={"actionItems"}>
            <button nodeRole={"actionView"}>Three</button>
          </actionItem>
        </actionBar>
        <flexboxLayout justifyContent='center'>
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the button s into actionItem s to add display them in the app bar.

Conclusion

We can add a wrap layout, activity indicator, and action bar into our mobile app with React NativeScript.